<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax在线聊天室Login</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        .divShow{
            border: 1px solid #ccc;
            height:300px;
            padding: 5px;
            font-size:12px;
            overflow-y:scroll; /*当超过高度的话会有一个滚动条的出现*/
        }
    </style>
</head>
<body>
<div id="divLogin">
    <h3>用户登陆</h3>
    <div id="content">
        <div>用户:<input id="txtName" type="text" class="txt" /></div>
        <div>密码:<input id="txtPass" type="password" class="txt" /></div>
        <div class="btnCenter">
            <input type="button" id="Button1" value="登陆" class="btn">
            <input type="reset" id="Reset1" value="取消" class="btn">
        </div>
        <span id="divMsg" class="clsTip"></span>
    </div>
</div>

<script type="application/javascript">
    var $URL = "__APP__/Home/AjaxChat/";
    $(function(){
        // 元素绑定全局ajaxStart事件
        $('#divMsg').ajaxStart(function(){
            $(this).show().html("正在发送请求...");   //显示元素
        });

        // 元素绑定全局ajaxStop事件
        $('#divMsg').ajaxStop(function(){
            $(this).html('页面请求完成').hide();
        });
        // 以上的两个绑定事件，让用户实时感觉自己操作到了哪一步了

        // 按钮点击事件
        $('#Button1').click(function(){
            // 使用一个变量把该对象缓存起来 不建议直接获取值
            var $name = $('#txtName');  //用户名
            var $pass = $('#txtPass');  //密码
            if($name.val() != "" && $pass.val() != ""){
                UserLogin($name.val(),$pass.val());
            }
            else{
                if($name.val() == ''){
                    alert('用户名不能为空');
                    $name.focus();
                    return false; //阻止向服务器发送请求
                }
                if($pass.val() == ''){
                    alert('密码不能为空');
                    $pass.focus();
                    return false;
                }
            }
        });
    });

    function UserLogin(name,pass){
        // {} 里面是好多的对象Object
        $.ajax({
            type:'GET',
            url:$URL+'login',
            data: {
                'time':new Date(),
                'name': name,
                'pass':pass
            },
            success:function(data){
                if(data == '1'){
                    window.location = '123123.heml';
                }else{
                    alert('用户名密码错误');
                    return false;
                }
            }

        });
    }
</script>
</body>
</html>